<template>
  <div>
    <!-- 头部 -->
    <el-card>
      <div slot="header" class="header">
        <span
          ><i class="el-icon-d-arrow-left" @click="goback"></i
          >更新用户:1/1</span
        >
      </div>
    </el-card>
    <!-- 主要信息 -->
    <el-card style="margin: 20px">
      <div slot="header">基础信息</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="400px"
        class="demo-ruleForm"
      >
        <el-form-item label="ID:" prop="id">
          <el-input
            v-model="ruleForm.id"
            placeholder=""
            disabled
            value='123'
          ></el-input>
        </el-form-item>
        <el-form-item label="名称:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="名称" value='123'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">更新</el-button>
          <el-button type="danger" @click="goback">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "Edit",
  data() {
    return {
      ruleForm: {},
      rules: {
        id: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    //点击取消自定义事件触发父组件显示主要组件
    goback() {
      this.$emit('goback')
    },
    // 点击更新将更改的数据传给原页面
    update(){
      let itemname=this.ruleForm.name
      let itemid=this.ruleForm.id
      this.$bus.$emit('update',{itemname,itemid})
      this.$message({
          message: '数据更新成功!',
          type: 'success'
        });
    },
    // 将获取到当前对象并保存
    getEdit(row){
      this.ruleForm=row
    }
  },
  // 接收父组件传递的对象
  mounted() {
    this.$bus.$on('edit',this.getEdit)
  },
};
</script>

<style lang='scss' scoped>
// 头部文字和图表
.header {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  span {
    .el-icon-d-arrow-left {
      color: #40a9ff;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}
::v-deep .el-input__inner {
  width: 600px;
  height: 40px;
  margin-top: 5px;
}
</style>
